<template>
  <div class="headerbox">
    <!-- header-top -->
    <div class="header-top">
      <div class="layui-main">
        <div class="banner-box">
          <div class="title">
            机械工业发展论坛
          </div>
          <div class="title-en">
            2024 Machinery Industry Forum
          </div>
          <div class="title-date">
            2024年5月6-10日  中国·北京
          </div>
          <!-- <div class="banner-left">
            <img
              src="https://www.boaoforum.org/ac2024p/assets/images/logo01@2x.png"
              alt=""
            />
          </div>
          <span class="span-line"></span>
          <div class="banner-right">
            <div class="title">
              机械发展论坛<span style="color: #f9be01">2024年</span>年会
            </div>
            <div class="title-en">
              Mechanical Development Forum for Annual Conference
              <span style="color: #f9be01">2024</span>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- header-bottom -->
    <!-- <div class="header-bottom">
      <div class="line"></div>
      <div class="header-menu layui-main">
        <ul>
          <li v-for="(item,index) in navList" :key="index">
            <router-link :to="item.path" active-class="header-menu-active">
              {{ item.title }}
            </router-link>
          </li>
        </ul>
      </div>
      <div class="line"></div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "MiicHeader",
  data() {
    return {
      navList: [
        {
          title: "活动内容",
          path: "/home",
        },
        {
          title: "日程安排",
          path: "/1",
        },
        {
          title: "会议报名",
          path: "/2",
        },
         {
          title: "展览活动",
          path: "/3",
        },
        {
          title: "合作伙伴",
          path: "/4",
        },
         {
          title: "新闻中心",
          path: "/5",
        },
        {
          title: "服务中心",
          path: "/6",
        },
        {
          title: "联系我们",
          path: "/7",
        },
     
      ],
    };
  },
};
</script>

<style scoped>

.headerbox {
  display: block;
}
.header-top {
  background-image: url('@/assets/images/banner.png');
  background-repeat:no-repeat;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
}
.layui-main {
  position: relative;
  width: 1160px;
  margin: 0 auto;
}
.banner-box {
  display: flex;
  justify-content:center;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 400px;
}

.banner-left {
  width: 400px;
  animation: up-appear 1s;
}
.banner-left {
  animation: up-appear 1s;
}

.banner-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-right > div:nth-child(1),
.banner-left {
  animation: up-appear 1s;
}
.banner-right div:nth-child(2) {
  width: 684px;
  margin: 1% 0;
}
img {
  width: 100%;
}
img {
  display: inline-block;
  border: none;
  vertical-align: middle;
}
.header-top .title {
  font-size: 82px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 8px;

}
.header-top .title-en {
  font-size: 40px;
  color: #ffffff;
  /* font-weight: bolder; */
  margin-top: 6px;
  letter-spacing: 4px;
}
.header-top .title-date {
  margin-top:54px;
  font-size: 36px;
  color: #ffffff;
  /* font-weight: bolder; */
  letter-spacing: 0.05em;
}

.header-menu-active {
  background: #f8b827;
  font-weight: bold;
  color: #010fa4 !important;
  border-radius: 40px;
  padding: 4px 10px;
}
</style>